<template>
  <div class="account-info-page">
    <Back-top></Back-top>
    <Nav active-name="account-on-sale"/>
    <div class="breadcrumb-holder flex-row-v-center">
      <div class="item">首页</div>
      <img class="arrow" src="~assets/img/icon-right-arrow.png"/>
      <div class="item">在售账号</div>
      <img class="arrow" src="~assets/img/icon-right-arrow.png"/>
      <div class="item active">账号详情</div>
    </div>
    <div class="sec-01 flex-row">
      <div class="img flex-center">
        <img :src="info.img">
      </div>
      <div class="info flex-1">
        <div class="title">{{info.title}}</div>
        <div class="content">
          <div class="item flex-row-v-center">
            <div class="key">更新时间：</div>
            <div class="val">{{info.update_time}}</div>
          </div>
          <div class="item flex-row-v-center">
            <div class="key">所属游戏：</div>
            <div class="val">天涯明月刀</div>
          </div>
          <div class="item flex-row-v-center" v-for="tag in info.tagInfoList" :key="tag.id">
            <div class="key">{{ tag.gameTagName }}：</div>
            <div class="val">{{ tag.name }}</div>
          </div>
          <div class="item flex-row-v-center">
            <div class="key">账号等级：</div>
            <div class="val">{{ info.level }}级</div>
          </div>
          <div class="item price flex-row-v-center">
            <div class="key">价格:</div>
            <div class="val">¥{{ info.price | moneyFormat }}</div>
          </div>
        </div>
        <div class="btn-holder flex-row-space-between">
          <div class="btn-box flex-center">购买咨询</div>
          <div class="hot-box">
            <img src="~assets/img/icon-hot.png" />
            {{ info.hot }}
          </div>
        </div>
      </div>
    </div>
    <div class="sec-02">
      <div class="title">账号详情</div>
      <div class="content" v-html="info.content"></div>
    </div>
  </div>
</template>

<script>
import Core from "~/core/core";

export default {
  data() {
    return {
      info: {}
    }
  },
  mounted() {
    console.log(this.$router)
    if (this.$route.query.id) {
      this.getAccountInfo(this.$route.query.id)
    }
  },
  methods: {
    getAccountInfo(id) {
      Core.Api.GameAccount.info({id: id})
        .then(res => {
          this.info = res
        })
        .catch(err => {
          this.$Message.error(err.msg);
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.account-info-page {
  background: rgb(245, 245, 245);

  .breadcrumb-holder {
    width: 1200px;
    height: 62px;
    margin: auto;

    .item {
      font-weight: 500;
      font-size: 16px;
      color: #A6ACB3;
      cursor: pointer;

      &.active {
        color: #3A3D41;
      }
    }

    .arrow {
      margin: 0 10px;
      width: 16px;
      height: 16px;
    }
  }

  .sec-01 {
    width: 1200px;
    margin: auto;
    background: #fff;
    padding: 30px 0 30px 32px;
    border-radius: 6px;
    .img {
      width: 700px;
      height: 400px;
      border: 1px solid #eeeeee;
      img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
      }
    }
    .info {
      padding-left: 30px;
      .title {
        font-weight: 500;
        font-size: 22px;
        color: #3A3D41;
        line-height: 30px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        padding-right: 32px;
      }
      .content {
        padding-top: 30px;
        padding-right: 32px;
        .item {
          font-size: 14px;
          color: #7F8389;
          line-height: 20px;
          margin-bottom: 12px;
          .key {
            width: 88px;
          }
          .val {
            color: #3A3D41;
          }
          &.price {
            line-height: 42px;
            .val {
              font-weight: 600;
              font-size: 30px;
              color: #F0562D;
            }
          }
        }
      }
    }
    .btn-holder {
      padding-top: 50px;
      .btn-box {
        width: 180px;
        height: 40px;
        background: #F58B01;
        border-radius: 23px;
        font-size: 16px;
        color: #FFFFFF;
        cursor: pointer;
      }
      .hot-box {
        background: #F3F3F3;
        border-radius: 20px 0 0 20px;
        font-size: 14px;
        color: #7F8389;
        padding: 10px 17px;
        line-height: 20px;
        img {
          width: 14px;
          height: 14px;
        }
      }
    }
  }

  .sec-02 {
    width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background: #FFFFFF;
    border-radius: 6px;

    .title {
      font-weight: 500;
      font-size: 20px;
      color: #3A3D41;
      line-height: 28px;
      margin-bottom: 20px;
    }

    .content {
      font-size: 16px;
    }
  }
}
</style>
